<template>
	<view>
		<view class="padding-30">
			<view class="flex-alignItems-center margin-bottom20">
				<view class="fontSize-15 color-000 margin-right30">答题进度</view>
				<view class="fontSize-30">
					<text class="color-EE6100">1</text>
					<text class="fontSize-15 color-808080">/160</text>
				</view>
			</view>
			<view class="margin-bottom50">
				<u-line-progress :percentage="30" activeColor="#EE6100" inactiveColor="#FFE0CB"></u-line-progress>
			</view>
			
			<view class="bg-fff border-radius20 padding-30" style="margin-bottom: 100rpx;">
				<view class="margin-bottom50">
					<view class="fontSize-18 color-000 fontWeight-bold margin-bottom20">
						A. 我认为在哪里跌倒，就应该哪里站起来
					</view>
					<view class="fontSize-18 color-000 fontWeight-bold">
						B. 我享受拼砌一千块以上的拼图
					</view>
				</view>
				<view class="check-item flex-alignItems-center">
					<view class="margin-right20">
						<image class="img-40" src="../../static/image/03.png" mode=""></image>
						<image class="img-40" src="../../static/image/04.png" mode=""></image>
					</view>
					<view class="fontSize-15 color-000">非常同意A</view>
				</view>
				<view class="check-item check-item-active flex-alignItems-center">
					<view class="margin-right20">
						<image class="img-40" src="../../static/image/03.png" mode=""></image>
						<image class="img-40" src="../../static/image/04.png" mode=""></image>
					</view>
					<view class="fontSize-15 color-000">非常同意A</view>
				</view>
			</view>
			
			<view class="index-btn flex-center margin-top50" @click="show=true">
				弹窗
			</view>
			
			<view class="index-btn flex-center margin-top50" @click="$tools.navigateTo('/user/index/download')">
				下一题
			</view>
		</view>
		
		<!-- 弹窗 -->
		<u-popup :show="show" mode="center" :round="20" bgColor="#FFFBF8">
			<view class="code-popup-view">
				<view class="fontSize-18 color-000 text-center fontWeight-bold margin-bottom10">
					已有答题记录
				</view>
				<view class="fontSize-18 color-000 text-center fontWeight-bold">
					请点击下方按钮继续答题
				</view>
				<view class="flex-center margin-top50">
					<view class="popup-check-btn flex-center">继续答题</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.popup-check-btn{
		// width: 200rpx;
		padding: 20rpx;
		width: 400rpx;
		border-radius: 40rpx;
		background-color: #EE6100;
		font-size: 15px;
		color: #ffffff;
	}
	.popup-right-view{
		background-color: #F2F2F2;
		border-radius: 10rpx;
		padding: 20rpx;
	}
	.code-popup-view {
		width: 600rpx;
		padding: 30rpx;
		border-radius: 30rpx 30rpx 0 0;
		// background: linear-gradient(122deg, #FFE8DB 20%, #FFFFFF 100%);
		// background-color: ##FFFBF8;
	}
	.index-btn {
		// width: 570rpx;
		height: 100rpx;
		font-weight: bold;
		font-size: 36rpx;
		color: #FFFFFF;
		background: linear-gradient(180deg, #F96040 0%, #EC2812 100%);
		border-radius: 49rpx 49rpx 49rpx 49rpx;
		border: 2rpx solid #FEFBB6;
	}
	.check-item-active{
		background: #FEF4EE !important;
	}
	.check-item{
		// width: 630rpx;
		// height: 30rpx;
		padding: 30rpx;
		background: #F6F8FA;
		border-radius: 20rpx;
		margin-bottom: 30rpx;
	}
</style>